<template>
  <div class="modal-wrap">
    <div class="modal">
      <div class="modal-close" @click="closeModal">×</div>
      <div class="form-title">健康时间</div>
      <div class="form">
        <div class="form-input-group">

          <input class="jk-input" type="text" v-model="loginUserName" placeholder="请输入手机号 / 邮箱"/>

        </div>
        <div class="form-input-group">
          <input class="jk-input" type="password" v-model="loginUserPassword" placeholder="请输入密码"/>
        </div>
        <button class="btn" @click="login">登&nbsp;&nbsp;录</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      login () {
        this.$store.dispatch('login', {
          username: this.$store.state.loginUserName,
          password: this.$store.state.loginUserPassword
        })
      },
      closeModal () {
        this.$store.dispatch('setShowLoginForm', {
          showLoginForm: false
        })
      }
    },
    computed: {
      loginUserName: {
        get () {
          return this.$store.state.loginUserName
        },
        set (value) {
          this.$store.dispatch('setLoginUserName', {loginUserName: value})
        }
      },
      loginUserPassword: {
        get () {
          return this.$store.state.loginUserPassword
        },
        set (value) {
          this.$store.dispatch('setLoginUserPassword', {loginUserPassword: value})
        }
      }
    }
  }
</script>
<style>
  .form-title{
    font-weight: 900;
    font-size: 25px;
    color: #13BA31;
    margin-bottom: 8px;
  }
  .modal {
    text-align: center;
    line-height: 50px;
  }

  .jk-input {
    width: 70%;
    height: 20px;
  }

  .btn {
    width: 75%;
    font-size: 16px;
    font-weight: 600;
  }
  .modal-close{
    font-size: 30px;
    position: relative;
    left: 45%;
    top:0px;
    cursor: pointer;
  }
  @media all and (min-width: 1200px) {
    .modal{
      width: 500px;
      height: 400px;
    }
  }

  @media all and (min-width: 767px) and (max-width: 1200px) {
    .modal{
      width: 500px;
      height: 400px;
    }
  }

  @media all and (max-width: 766px) {
    .modal{
      width: 100%;
      z-index: 12;
    }
  }
</style>
